<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EChartsComponent',
  data () {
    return {
      myChart: undefined
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.echarts)
    const option = {
      title: {
        text: '笛卡尔坐标系下的散点图'
      },
      xAxis: {},
      yAxis: {},
      series: [
        {
          // 点的大小
          // symbolSize: 20,
          symbolSize: function (value) {
            return value / 10;
          },
          // 点的形状 'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'
          symbol: 'rect',
          type: 'scatter',
          data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68]
          ]
        }
      ]
    }
    this.myChart.setOption(option)
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped></style>
